<template>
  <el-main>
    <el-descriptions class="margin-top" title="医院基本信息" :column="4" border>
      <template slot="extra">
        <el-button type="primary" size="small" @click="back">返回</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">医院名称</template>
          <b>{{hospital.hosname}}</b> | {{hospital.param.hostypeStr}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">医院logo</template>
        <img :src="'data:image/jpeg;base64,'+hospital.logoData" width="60" :alt="hospital.hosname+'医院logo'"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">医院编码</template>
        {{hospital.hoscode}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">地址</template>
        {{hospital.param.fullAddress}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">坐车路线</template>
        {{hospital.route}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">医院简介</template>
        {{hospital.intro}}
      </el-descriptions-item>
    </el-descriptions>
    <br>
    <br>
    <br>
    <el-descriptions class="margin-top" title="预约挂号信息" :column="2" border>
      <el-descriptions-item>
        <template slot="label">预约周期</template>
        {{bookingRule.cycle}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">放号时间</template>
        {{bookingRule.releaseTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">停挂时间</template>
        {{bookingRule.stopTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">退号时间</template>
        {{bookingRule.quitTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">预约规则</template>
        <span v-for="(item, index) in bookingRule.rule" :key="index">
          {{index+1}}、{{item}}<br/>
        </span>
      </el-descriptions-item>
    </el-descriptions>
  </el-main>
</template>

<script>
import hospital from '../../api/hospital'
export default {
  name: 'show',
  data() {
    return {
      hospital: {},// 医院信息
      bookingRule: {}// 预约信息
    }
  },
  created() {
    // 获取路由传递过来的 id，并查询
    if (this.$route.params && this.$route.params.id) {
      const id = this.$route.params.id;
      // console.log(id);
      this.getHospitalDetail(id);
    }
  },
  methods: {
    // 根据 id 获取医院详情
    getHospitalDetail(id) {
      hospital.getHospitalDetail(id).then(
        response => {
          this.hospital = response.data.hospital;
          this.bookingRule = response.data.bookingRule;
          // console.log(this.hospital);
          // console.log(this.bookingRule);
        }
      ).catch(
        error => {
          this.$message({
            type: 'error',
            message: '数据请求失败!'
          });
        }
      )
    },
    // 返回
    back() {
      this.$router.push({path:'/hospital/list'})
    }
  }
}
</script>

<style scoped>

</style>
